<template>
	<view class="cinema">
		<view class="nav" :style="{top:props.top?props.top:'168rpx'}">
			<view class="nav-item">
				全城
			</view>
			<view class="nav-item">
				品牌
			</view>
			<view class="nav-item">
				特色
			</view>
		</view>
		<view class="content">
			<home-item-cinema v-for="(item,index) in cinemaList" :key="index" :item="item"></home-item-cinema>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted
	} from "vue";
	import {
		useGlobalStore
	} from "@/stores/global.js";
	import {
		getFilterCinemas,
		getCinemaList
	} from "@/api/index.js";
	const store = useGlobalStore();
	const props = defineProps(["getMore", 'top']);
	const allNav = ref();
	const cinemaList = ref([]);
	const options = ref({
		cityId: 0,
		longitude: 0,
		latitude: 0,
		offset: 0
	});
	const getData = async () => {
		uni.showLoading({
			title: "加载中"
		})
		let res1 = await getFilterCinemas(store.city.id);
		allNav.value = res1.data;
		uni.getLocation({
			type: 'wgs84',
			success: async (res) => {
				options.value = {
					latitude: res.latitude,
					longitude: res.longitude,
					cityId: store.city.id,
					offset: 0
				}
				console.log(options.value);
				let res2 = await getCinemaList(options.value);
				cinemaList.value = res2.data;
				console.log(cinemaList.value);
				uni.hideLoading();
			}
		});
	};
	watch(() => props.getMore, async () => {
		uni.showLoading({
			title: "加载中"
		})
		options.value.offset += 1;
		let res2 = await getCinemaList(options.value);
		cinemaList.value = [...cinemaList.value, ...res2.data];
		uni.hideLoading();
	});
	watch(() => store.city.id, () => {
		getData();
	});
	onMounted(async () => {
		getData();
	})
</script>

<style lang="scss" scoped>
	.cinema {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;

		.nav {
			position: sticky;
			left: 0;
			top: 168rpx;
			background-color: var(--white);
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid var(--gray3);

			.nav-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				opacity: .8;
			}
		}

		.content {
			width: 100%;
		}
	}
</style>